<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滴答办公系统-员工新增</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
<script type="text/javascript" src="media/js/jquery.min.js"></script>
</head>
<body>
	<div class="layui-container" style="margin-top: 50px;" >
		<form class="layui-form" action="staffadd.do" method="post"
			enctype="multipart/form-data">

			<div class="layui-form-item">
				<label class="layui-form-label">工号</label>
				<div class="layui-input-inline">
					<input type="text" name="no" id="no" readonly="readonly"
						lay-verify="name" autocomplete="off" placeholder="请输入工号"
						class="layui-input">
				</div>

			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">员工姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" lay-verify="name" autocomplete="off"
						placeholder="请输入姓名" class="layui-input">
				</div>
				<label class="layui-form-label">所属部门</label>
				<div class="layui-input-inline">
					<select name="did" id="d1">
						<option value="">--请选择部门--</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked>
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email" lay-verify="required"
						placeholder="请输入邮箱" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" lay-verify="required"
						placeholder="请输入手机号" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">QQ</label>
				<div class="layui-input-inline">
					<input type="text" name="qq" lay-verify="required"
						placeholder="请输入QQ号" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">入职日期</label>
				<div class="layui-input-inline">
					<input type="text" name="entrytime" id="date1" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">照片</label> <img alt="图片预览"
					id="ylimg" src="media/images/qf_logo.png" width="200px"
					height="200px" /> <label class="layui-btn" for="f1"><i
					class="layui-icon">&#xe67c;</i>上传图片</label><label class="layui-form-label">
				</label> <input class="layui-btn" type="submit" value="确认新增"> <input
					type="file" name="f1" id="f1" onchange="yl(this,'ylimg')"
					style="display: none" />
			</div>
		</form>
	</div>


	<script src="media/layui/layui.js"></script>
	<script type="text/javascript">
		//预览图片,参数说明：第一个参数：要预览的file对象，第二个参数：预览的img标签的id名称
		function yl(obj, id) {
			//FileReader
			if (window.FileReader) {//验证当前的浏览器是否支持图片预览
				var reader = new FileReader();
				var file = obj.files[0];
				var regexImage = /^image\//;//js正则表达式，匹配是否拥有image
				if (regexImage.test(file.type)) {
					//设置读取结束的回调函数
					reader.onload = function(data) {
						var img = document.getElementById(id);
						img.src = data.target.result;//将结果数据显示到img标签上

					};
					//开始读取上传的文件内容
					reader.readAsDataURL(file);
				} else {
					alert("亲，看清楚是图片预览");
					return;
				}
			} else {
				alert("亲，浏览器该升级了");

				return;
			}
		}
	</script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		var form;
		layui.use([ 'form', 'layedit', 'laydate' ], function() {
			form = layui.form, layer = layui.layer, layedit = layui.layedit,
					laydate = layui.laydate;

			//日期
			laydate.render({
				elem : '#date'
			});
			laydate.render({
				elem : '#date1'
			});

			//自定义验证规则
			form.verify({
				title : function(value) {
					if (value.length < 5) {
						return '标题至少得5个字符啊';
					}
				},
				pass : [ /(.+){6,12}$/, '密码必须6到12位' ],
				content : function(value) {
					layedit.sync(editIndex);
				}
			});
			initData();
		});
		//初始化数据
		
		function initData() {
			$.get("departall.do", null, function(arr) {
				for (i = 0; i < arr.length; i++) {
					$("#d1").append(
							"<option value='"+arr[i].id+"'>" + arr[i].name
									+ "</option>");
				}
				form.render("select");
			});
			$.get("staffno.do", null, function(obj) {
				if (obj.msg == 'null') {
					$("#no").val("qf10001");
				} else {
					var str = obj.msg;
					$("#no").val(str.split(str.substr(2,3))[0]+(parseInt(str.substr(2))+1));
					
		/* if (str.indexOf('f')) {
						var num = parseInt(str.split('f')[1]) + 1;				
						$("#no").val('qf' + num);
					} */

				}

			})
		}
	</script>
</body>
</html>